5
5
.
.
1
1
7
7
.
.
o
o
n
n
T
T
a
a
p
p
G
G
e
e
s
s
t
t
u
u
r
r
e
e
I
I
n
n
f
f
o
o
.onTapGesture Modifier allows View to react to Tap.
Provided Closure is called as soon as you Tap on the View (Closure has no Input Parameters).
Alternative is to use .gesture(TapGesture())
Gestures tutorial contains additional explanations.
Syntax
.onTapGesture { print("TAP") }
E
E
x
x
a
a
m
m
p
p
l
l
e
e
In the below example circle changes color when you tap on it.
TapGesture().onEnded()
struct ContentView: View {
@State var color = true
var body: some View {
Circle()
.fill(color ? Color.green : Color.red)
.frame(width: 50, height: 50)
.onTapGesture {
self.color.toggle()
}
}
}
Initial color Tap to change color
T
T
a
a
p
p
w
w
i
i
t
t
h
h
A
A
n
n
i
i
m
m
a
a
t
t
i
i
o
o
n
n
In this example when we tap on the Text View we will see the Text View move from its initial to the new position.
Initially we show Text View with offset = 0. When the Text is tapped we change offset to 100.
Since offset is State Variable, changing its value redraws the View and Text View is shown at new offset position.
Since we have added .animation Modifier to the Text View it will move into new position through an animation.
ContentView.swift
struct ContentView : View {
@State private var offset:CGFloat = 0 //Define Stata Variable offset
var body: some View {
Text("TEXT") //Add Text View
.offset(x: offset) //We will change offset Property
.onTapGesture { self.offset = 100 } //On Tap changes offset Property
.animation(Animation.easeOut(duration: 5)) //Define animation for when Property changes
}
}
Initial position Final position (after tapping on the Text)
